<template>
  <!-- 接入数据源 -->
  <div class="rule-box">
    <div v-if="$route.query.name" class="back-title">
      <i class="el-icon-arrow-left" @click="$router.go(-1)">返回</i>
    </div>
    <div class="app-container hk-flex-column">
      <div class="app-container-bg">
        <datasourceTypeItem :data="tabs" @handleClick="handleClick" />
      </div>
      <div class="hk-container">
        <div class="hk-flex-bottom">
          <el-form
            v-show="showSearch"
            ref="queryForm"
            style="flex:1"
            :model="queryParams"
            size="small"
            :inline="true"
            @submit.native.prevent
          >
            <el-form-item label="关键字" prop="queryKeywords">
              <el-input v-model="queryParams.queryKeywords" placeholder="请输入数据源名称/IP" clearable style="width: 240px" maxlength="20" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="接入产品" prop="productCode">
              <el-cascader
                v-model="productCode"
                filterable
                :options="productData"
                :props="propsData"
                :show-all-levels="false"
                clearable
                @change="handleChange"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询 </el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置 </el-button>
            </el-form-item>
          </el-form>
          <el-row :gutter="10" class="mt2">
            <el-col :span="1.5">
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增 </el-button>
            </el-col>
          </el-row>
        </div>
        <div v-loading="loading" class="table-wk">
          <div v-if="tableData.length>0" ref="tableLists" class="table-lists">
            <div v-for="(item,index) in tableData" :key="item.id" class="table-list hk-flex">
              <div class="table-list-l">
                <img class="list-img" :src="item.typeIconUrl || require('@/assets/images/sjjr_jrsjy_all.png')" alt="">
              </div>
              <div class="table-list-c" style="flex:1">
                <h4 class="table-tit">{{ item.name }}</h4>
                <div class="table-cont hk-flex">
                  <div class="flex-1"><span>接入产品：</span>
                    <template v-if="item.jsonObject.companyInfos.length>0">
                      <span v-for="(i,indx) in item.jsonObject.companyInfos" :key="indx">{{ i }}</span>
                      <b v-if="item.jsonObject.companyInfos.length>1 && indx!=item.jsonObject.companyInfos.length-1" class="marg-10">|</b>
                    </template>
                    <template v-else>-</template>
                  </div>
                  <div class="flex-1"><span>队列服务IP：</span>{{ item.ip?item.ip:'-' }}</div>
                  <div class="flex-1"><span>端口：</span>{{ item.port?item.port:'-' }}</div>
                  <div v-if="JSON.parse(item.connectInfo).topic" class="flex-1"><span>消费主题：</span>{{ JSON.parse(item.connectInfo).topic?JSON.parse(item.connectInfo).topic:'-' }}</div>
                </div>
                <div class="table-cont">
                  <div class="hk-flex">
                    <span style="width:70px;">关联任务：</span>
                    <div v-if="item.jsonObject.tasks.length>0" class="cont-elips flex-1">
                      <!-- <el-tooltip placement="top-start" :content="item.jsonObject.tasks.join(' 、 ') "> -->
                      <div class="el-ellipsis">
                        <span v-for="(i,indx) in item.jsonObject.tasks" :key="indx" class="table-cont-list">
                          {{ i }}
                          <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                        </span>
                      </div>

                      <!-- </el-tooltip> -->
                      <!-- <template v-for="(i,indx) in item.jsonObject.tasks" class="table-cont-list">
                        {{ i }}
                        <b v-if="item.jsonObject.tasks.length>1 && indx!=item.jsonObject.tasks.length-1" class="marg-10">|</b>
                      </template> -->
                    </div>
                    <template v-else>
                      <span class="table-cont-list">-</span>
                    </template>
                  </div>
                </div>
              </div>
              <div class="table-list-r">
                <el-button size="mini" type="text" @click="handleUpdate(item)">编辑 </el-button>
                <span class="btn-line">|</span>
                <el-button size="mini" type="text" @click="handleDelete(item)">删除 </el-button>
              </div>
            </div>
          </div>
          <div v-else ref="tableLists" class="table-lists">
            <el-empty description="暂无数据" />
          </div>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.current"
            :limit.sync="queryParams.size"
            @pagination="handleChangePage"
          />
        </div>
      </div>
      <edit-dialog
        ref="editDialogRef"
        :title="title"
        :form="formData"
        :data-type="tabs"
        :source-type="sourceType"
        :edit-info="editInfo"
        @changeOpen="changeOpen"
      />
    </div>
  </div>
</template>

<script>
import datasourceTypeItem from '../../components/datasource/TypeItem'
import { getAccessDataList, getList, ProductType, delAccessData, accessDataInfo } from '@/api/milkyway/gatherData'
import HkTable from '@/components/Hk-Table/index.vue'
import editDialog from './edit'

export default {
  name: 'GatherDatSourcePage',
  components: { datasourceTypeItem, HkTable, editDialog },
  data() {
    return {
      loading: false,
      tabIndex: 0,
      title: '',
      // 显示搜索条件
      showSearch: true,
      productCode: [],
      propsData: {
        value: 'id',
        label: 'name',
        checkStrictly: true,
        multiple: false
      },
      productData: [],
      tabs: [],
      tableData: [],
      tableFieldList: [],
      kafkaTableList: [
        { label: '', param: 'list' }
        // { label: '数据源名称', param: 'name' },
        // { label: '接入产品', param: 'companyInfos', type: 'slot', showToolTip: true },
        // { label: '数据类型', param: 'sourceType', width: 100 },
        // { label: '队列服务IP', param: 'ip', width: 120 },
        // { label: '端口', param: 'port', width: 100 },
        // { label: '消费主题', param: 'topic', type: 'slot', width: 100 },
        // { label: '关联任务', param: 'tasks', type: 'slot', width: 160, showToolTip: true },
        // { label: '修改时间', param: 'dsUpdate', width: '150' }

        /* { label: '服务ip', param: 'ip' },
        { label: '端口', param: 'port' },
        { label: '数据类型', param: 'sourceType' },
        { label: 'syslog发送端ip', param: 'sendIp' },
        { label: '连接信息', param: 'connectInfo', type: 'slot' },
        { label: '修改时间', param: 'dsUpdate' }*/
      ],
      jdbcTableList: [
        { label: '数据源名称', param: 'name' },
        { label: '接入产品', param: 'companyInfos', type: 'slot', showToolTip: true },
        { label: '数据库类型', param: 'databaseType', type: 'slot' },
        { label: '数据库IP', param: 'ip' },
        { label: '数据库端口', param: 'port' },
        { label: '数据库名称', param: 'databaseName', type: 'slot' },
        { label: '关联任务', param: 'tasks', type: 'slot', showToolTip: true }
      ],
      syslogTableList: [
        { label: '数据源名称', param: 'name' },
        { label: '接入产品', param: 'companyInfos', type: 'slot', showToolTip: true },
        { label: '数据库类型', param: 'sourceType', width: 120 },
        { label: 'syslog发送端IP', param: 'sendIp' },
        { label: 'syslog服务IP', param: 'ip' },
        { label: 'syslog端口', param: 'port', width: 120 },
        { label: '关联任务', param: 'tasks', type: 'slot', showToolTip: true }
      ],
      esTableList: [
        { label: '数据源名称', param: 'name' },
        { label: '接入产品', param: 'companyInfos', type: 'slot', showToolTip: true },
        { label: '数据类型', param: 'sourceType' },
        { label: '协议类型', param: 'protocol', type: 'slot' },
        { label: 'ES接收端IP', param: 'ip' },
        { label: '端口', param: 'port' },
        { label: '索引名称', param: 'indexName', type: 'slot' },
        { label: '关联任务', param: 'tasks', type: 'slot', showToolTip: true }
      ],
      httpTableList: [
        { label: '数据源名称', param: 'name' },
        { label: '接入产品', param: 'companyInfos', type: 'slot', showToolTip: true },
        { label: '数据类型', param: 'sourceType' },
        { label: '接口IP', param: 'ip' },
        { label: '接口端口', param: 'port' },
        { label: '关联任务', param: 'tasks', type: 'slot', showToolTip: true }
      ],
      total: 0,
      sourceType: 'Kafka',
      queryParams: {
        current: 0,
        size: 10,
        queryKeywords: undefined,
        productCode: undefined,
        sourceType: ''
      },
      editInfo: {},
      formData: {
        connectInfo: {}
      }
    }
  },
  created() {
    this.tableFieldList = this.kafkaTableList
    this.getAccessDataList()
    this.getList()
    this.getProuductType()
  },
  methods: {
    /** 获取产品类型 */
    getProuductType() {
      ProductType(0).then((res) => {
        const resVal = res
        if (resVal.length > 0) {
          resVal.forEach((item) => {
            item.children.forEach((i) => {
              delete i.children
            })
          })
        }
        this.productData = resVal
      })
    },
    // 获取表格数据
    getList() {
      this.loading = true
      this.queryParams.scrollToTop = true
      getList(this.queryParams).then((res) => {
        this.tableData = res.list
        this.total = res.total
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    //  分页
    handleChangePage() {
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },
    /** 获取左侧列表*/
    getAccessDataList() {
      getAccessDataList(0).then((res) => {
        this.tabs = res
      })
    },
    /** 左侧列表点击事件*/
    handleClick(index) {
      this.queryParams.current = 1
      if (index == 0) {
        this.queryParams.sourceType = ''
        this.sourceType = ''
      } else {
        this.queryParams.sourceType = this.tabs[index - 1].keyValue
        this.sourceType = this.tabs[index - 1].keyValue
      }

      switch (this.sourceType) {
        case 'JDBC':
          this.tableFieldList = this.jdbcTableList
          break
        case 'Kafka':
          this.tableFieldList = this.kafkaTableList
          break
        case 'ES':
          this.tableFieldList = this.esTableList
          break
        case 'HTTP':
          this.tableFieldList = this.httpTableList
          break
        case 'Syslog':
          this.tableFieldList = this.syslogTableList
          break
        default:
          this.tableFieldList = this.kafkaTableList
      }
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },
    /** 分页 */
    changePage(data) {
      this.getList()
    },
    /** 操作-编辑*/
    handleUpdate(row) {
      this.title = '编辑'
      this.sourceType = row.sourceType
      accessDataInfo(row.id).then((res) => {
        this.formData = res.dataSource
        this.editInfo = res
        this.connectInfo = JSON.parse(res.dataSource.connectInfo)
        this.$refs.editDialogRef.show(row.id)
      })
    },
    /** 操作-删除*/
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除设备名称为"' + row.name + '"的数据项？')
        .then(function() {
          return delAccessData(row.id)
        })
        .then((res) => {
          this.$message.success('删除成功')
          this.getAccessDataList()
          this.getList()
        })
    },
    /** 查询列表*/
    handleQuery() {
      this.queryParams.current = 1
      if (this.productCode) {
        if (this.productCode.length > 1) {
          this.queryParams.productCode = this.productCode[1]
        } else {
          this.queryParams.productCode = this.productCode[0]
        }
      }
      this.getList()
      this.$refs.tableLists.scrollTop = 0
    },
    /** 级联选事件*/
    handleChange(data) {},
    /* 重置列表*/
    resetQuery() {
      this.resetForm('queryForm')
      this.productCode = []
      this.handleQuery()
    },
    /** 新增*/
    handleAdd() {
      this.title = '新增'
      this.editInfo = {}
      this.$refs.editDialogRef.show()
      this.formData = {
        connectInfo: {}
      }
    },
    /** changeOpen */
    changeOpen() {
      this.queryParams.current = 1
      this.getList()
      this.getAccessDataList()
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin hk-flex {
  display: flex;
  justify-content: center;
}

::v-deep .el-button{
  font-size:14px;
}
::v-deep .el-tooltip{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
::v-deep .popper__arrow{
  left:50px;
}
.marg-10{
  margin:0 10px;
}

//重定义样式
.app-container {
  width:100%;
  padding:0px;
  overflow: hidden !important;
  background:#eef0f5 !important;

  &.hk-flex {
    padding: 0;
    @include hk-flex;
    height: 100%;
    overflow: auto;
    background: #eef0f5;
  }

  .hk-container {
    background: #fff;
    width: 100% !important;
    overflow: hidden;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
  }
}

::v-deep .el-table__body-wrapper {
  height: calc(100% - 50px) !important;
  overflow-y: auto !important;
}
.el-tag-custom {
  max-width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
